<ui:composition template="/template/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:define name="corpo">
        <h:form id="form">

            <p:panel header="Cadastro de Questionários" id ="painel">
                <h:panelGrid columns="2" cellpadding="4">

                    <h:outputText value="Informe o centro:"/>

                    <p:selectOneMenu id="selectCentro" value="#{mbCadastroQuestionarios.centro}">
                        <f:selectItems value="#{mbCadastroQuestionarios.centros}"/>
                        <p:ajax update="selectDisciplina" listener="#{mbCadastroQuestionarios.atualizarDisciplina()}"/>
                    </p:selectOneMenu> 

                    <h:outputText value="Informe a disciplina:"/>
                    <p:selectOneMenu id="selectDisciplina" value="#{mbCadastroQuestionarios.disciplina}">  
                        <f:selectItems value="#{mbCadastroQuestionarios.disciplinas}"/>
                        <p:ajax update="selectCurso" listener="#{mbCadastroQuestionarios.atualizarCurso()}"/>
                    </p:selectOneMenu> 

                    <h:outputText value="Informe o curso:"/>
                    <p:selectOneMenu id="selectCurso" value="#{mbCadastroQuestionarios.curso}">  
                        <f:selectItems value="#{mbCadastroQuestionarios.cursos}"/> 
                    </p:selectOneMenu> -->
                </h:panelGrid>

                <h:outputText value="Questões"/>

                <p:dataTable id="questoes" var="questao" value="#{mbCadastroQuestionarios.questaoModel}" paginator="true" rows="10"  
                             selection="#{mbCadastroQuestionarios.selectedQuestao}" >  

                    <f:facet name="header">  
                        Tabela de Questões  
                    </f:facet>  

                    <p:column selectionMode="multiple" style="width:18px" />  

                    <p:column headerText="num Questão">  
                        #{questao.idquestao}  
                    </p:column>  

                    <p:column headerText="Questão">  
                        #{questao.questao}  
                    </p:column>  

                    <p:column headerText="Validada" >  
                        #{questao.validada}  
                    </p:column>  

                    <f:facet name="footer">  
                        <p:commandButton id="visualizar" value="Questões selecionadas" oncomplete="questoesDialog.show()" update=":form:multiDialog"/>  
                    </f:facet> 

                </p:dataTable> 

                <p:dialog id="multiDialog" header="Gerar questionário" widgetVar="questoesDialog"  
                          height="220" showEffect="fade" hideEffect="explode">  

                    <h:panelGrid columns="2" columnClasses="column" cellpadding="5">  

                            <h:outputText value="Disciplina: " style="color: #045491"/>
                            <h:outputText id="disciplinaText" value="#{mbCadastroQuestionarios.disciplina}"/>

                            <h:outputText value="Curso: " style="color: #045491"/>
                            <h:outputText id="cursoText" value="#{mbCadastroQuestionarios.curso}"/>

                        </h:panelGrid>

                        <br></br>
                        
                        <p:dataTable id="displayMulti" var="questao" value="#{mbCadastroQuestionarios.selectedQuestao}" paginator="false" rows="10">  


                            <f:facet name="header">  
                                Questões Selecionadas  
                            </f:facet>  

                            <p:column headerText="num Questão">  
                                    #{questao.idquestao}  
                            </p:column>  

                            <p:column headerText="Questão">  
                                    #{questao.questao}  
                            </p:column>  

                            <p:column headerText="Validada" >  
                                    #{questao.validada}  
                            </p:column>  

                        </p:dataTable>
                        
                        <br></br>
                            
                        <div align="center">
                            <p:commandButton id="salvar" value="Cadastrar"/>
                            <p:commandButton id="cancelar" value="Cancelar"/>
                        </div>

                </p:dialog> 

            </p:panel> 

        </h:form>
    </ui:define>
</ui:composition>
